<template>
  <!-- 账号管理 -->
  <div class="usersteeing">
    <el-form :inline="true" size="mini" :model="query" class="demo-form-inline">
      <el-form-item label="输入搜索：">
        <el-input v-model="query.user" placeholder="姓名/账号/手机号"></el-input>
      </el-form-item>
      <el-form-item label="账号状态：">
        <el-select v-model="query.status">
          <el-option label="启用" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
      <el-form-item style="float: right;">
        <el-button type="primary" @click="dialogShow = true">新增用户</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe>
      <el-table-column prop="loginName" label="账号"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="status" label="账号状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="(e) => switchChange(scope.row, e)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editUserShowFunc(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      small
      layout="prev, pager, next"
      :total="total_num"
      @current-change="pageChange"
    ></el-pagination>

    <el-dialog
      :title="update_id?'修改': '添加'"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      width="30%"
      @close="closeDialog"
    >
      <el-form :model="formData" ref="form" label-width="100px" size="mini" :rules="rules">
        <el-form-item label="账号" prop="login_name">
          <div v-if="update_id">{{formData.login_name}}</div>
          <el-input v-else v-model="formData.login_name" placeholder="请输入账号" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="user_name">
          <el-input v-model="formData.user_name" placeholder="请输入姓名" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="formData.phone" maxlength="11" type="number" @input="phoneChange" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="sureConfirm">{{update_id ? '修 改' : '添 加'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      query: {
        user: "",
        status: "",
      },
      dialogShow: false,
      formData: {
        login_name: "",
        user_name: "",
        phone: "",
      },
      update_id: "",
      total_num: 10,
      page: 1,
      limit: 10,
      tableData: [],
      rules: {
        login_name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/[\u4e00-\u9fa5]/.test(value)) {
                callback(new Error("请输入英文和数字的组合~"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        user_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (String(value).length !== 11) {
                callback(new Error("请输入11位数字~"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    closeDialog() {
      this.onReset();
    },
    async switchChange(row, e) {
      console.log(e, "e");
      try {
        const res = await this.axios.post(
          this.apis.userManageDisableOrEnableUser,
          {
            user_id: row.id,
            status: e,
          }
        );
        console.log(res, "res");
      } catch (err) {
        console.log(err, "er");
      }
    },
    phoneChange(value) {
      console.log(value, "value");
      if (value.length > 11) this.formData.phone = value.slice(0, 11);
    },
    async fetchData() {
      const res = await this.axios.post(this.apis.userManageQuery, {
        name: this.query.user || undefined,
        status: this.query.status || undefined,
        page: this.page,
        limit: this.limit,
      });
      if (res.retCode === 2000) {
        this.tableData = res.rows.items;
        this.total_num = res.rows.total_num;
      } else {
        this.tableData = [];
      }
    },
    onReset() {
      this.update_id = "";
      this.query = {
        user: "",
        status: "",
      };
      this.formData = {
        login_name: "",
        user_name: "",
        phone: "",
      };
      this.fetchData();
    },
    editUserShowFunc(row) {
      this.dialogShow = true;
      this.update_id = row.id;
      this.formData = {
        login_name: row.loginName,
        user_name: row.userName,
        phone: row.phone,
      };
    },
    pageChange(e) {
      this.page = e;
      this.fetchData();
    },
    sureConfirm() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res;
          if (!this.update_id) {
            res = await this.axios.post(this.apis.userManageCreate, {
              ...this.formData,
            });
          } else {
            res = await this.axios.post(this.apis.userManageUpdate, {
              ...this.formData,
              user_id: this.update_id,
            });
          }
          if (res.retCode === 2000) {
            this.$message.success("添加成功!");
          } else {
            this.$message.warning(res.retMessage);
          }
          // this.fetchData();
          this.dialogShow = false;
        } else {
          this.$message.warning("请输入完整信息~");
        }
      });
    },
  },
};
</script>
<style lang="less">
.usersteeing .el-table__header-wrapper .el-table__cell {
  padding: 5px 0;
  font-size: 12px;
}
.usersteeing .el-table__body-wrapper .el-table__cell {
  padding: 5px 0;
  font-size: 10px;
}

.usersteeing th.el-table__cell {
  background-color: rgba(245, 247, 250, 1);
}

.usersteeing {
  height: 100%;
  position: relative;
  .pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-pager li.active {
    background-color: #409eff;
    border-radius: 3px;
    color: #fff;
  }
  .el-pagination .btn-prev,
  .el-pagination .btn-next {
    padding: 0 4px !important;
  }
}

</style>